<template>
  <div
    id="map"
    style="width:100;height:600px"
  >

  </div>
</template>

<script>
/****
 *  1、引入echarts
 *  2、获取地址位置信息  经纬度范围  阿里datav 获取数据
 *     http://datav.aliyun.com/portal/school/atlas/area_selector
 *  3、根据获取经纬度信息 画出地图轮廓
 *  4、在对应的地理位置上标注数据信息  全国大学分布情况
 *
 *
 *
 */
import * as echarts from 'echarts'
export default {
  data() {
    return {
      data: []
    }
  },
  created() {
    // 请求数据
    this.$http.get('https://api.i-lynn.cn/college').then((res) => {
      console.log(res)
      /***  处理数据结构  {area:xxx,counts}   {name:xxxx,value:xxx} */
      let tmp = []
      res.data.data.list.forEach((item) => {
        console.log(item)
        let obj = {}
        obj.name = item.area
        obj.value = item.counts
        tmp.push(obj)
      })
      this.data = tmp
      //  数据返回后处理加载地图现实
      this.loadMap()
    })
  },
  methods: {
    loadMap() {
      var chartDom = document.getElementById('map')
      var myChart = echarts.init(chartDom)
      var option

      myChart.showLoading()
      // 请求必须添加代理标识 才能够被代理服务器识别 需要代理请求
      // this.$http.get('/api/examples/data/asset/geo/HK.json').then((res) => {
      this.$http.get('http://127.0.0.1:3000/china').then((res) => {
        console.log(res.data[0])
        myChart.hideLoading()
        echarts.registerMap('China', res.data[0])
        myChart.setOption(
          (option = {
            title: {
              text: '全国大学分布情况',
              subtext: '数据来源：教育部'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}所'
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            visualMap: {
              // 设置数据的最小值和最大值
              min: 5,
              max: 150,
              text: ['High', 'Low'],
              realtime: false,
              calculable: true,
              inRange: {
                // 最小值到最大值的颜色范围
                color: ['red', '#89eb9f', 'green']
              }
            },
            series: [
              {
                type: 'map',
                map: 'China',
                top: 200,
                zoom: 1.6,
                roam: true, //是否开启平游或缩放
                scaleLimit: {
                  //滚轮缩放的极限控制
                  min: 1,
                  max: 10
                },
                label: {
                  show: true
                },
                data: [...this.data, { name: '台湾省', value: 20 }]
              }
            ]
          })
        )
      })
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>